import message from '@c/message'
import styles from './index.module.scss'
import { downloadReport } from '@/utils/report'
import { DOWNLOAD_URL } from '@/constant'
import Link from 'next/link'
import cls from 'classnames'
import { useEffect } from 'react'
import { downloadType } from '@/store'
import { useRecoilState } from 'recoil'
import { useRouter } from 'next/router'
import Copy from 'clipboard'
import Image from '@c/image'

const Index = () => {
  const { query } = useRouter()
  const [type, setType] = useRecoilState(downloadType)
  // 获取会话中的存储内容，避免页面刷新。数据归位了
  useEffect(() => {
    const initType = query.to || sessionStorage.getItem('downloadType') || 'phone'
    setType(initType)

    const copyUrl = new Copy('.down-btn')
    copyUrl.on('success', () => {
      message({ content: '下载链接复制成功，在手机浏览器中打开吧！' })
    })

    return () => {
      sessionStorage.setItem('lastPage', true)
    }
  }, [])

  return (
    <>
      <div className={cls(styles.downloadContainer, 'hideWhenPhone')}>
        <div className={styles.download}>
          <img loading="lazy" src="/images/tvphone.webp" className={styles['download-img']} alt="电视" />
          <p className={styles['download-slogan']}>更多内容 更多享受</p>
          <p className={styles['download-desc']}>全球直播电视台、电影、电视剧、综艺、体育赛事...应有尽有</p>
          <div className={styles['download-box']}>
            <div className={styles['download-box-item']}>
              <div className={styles['box-item-title']}>
                <img loading="lazy" src="/images/tv-download.png" alt="电视" />
                <span>电视/机顶盒客户端</span>
              </div>
              <p className={styles['box-item-desc']}>倍速播、高清画质、流畅播放</p>
              <a
                rel="nofollow"
                className={styles['box-item-tv-download']}
                href={DOWNLOAD_URL.tv}
                download
                onClick={() => downloadReport('home_tv_download')}
              >
                <img loading="lazy" src="/images/download_page.png" alt="电视下载" />
                <span>下载安装包</span>
              </a>
              <div className={styles['box-item-type']}>
                <Link href="/download/usb">有U盘安装指南{'>'}</Link>
                <Link href="/download/withoutusb">无U盘安装指南{'>'}</Link>
              </div>
            </div>
            <div className={styles['download-box-item']}>
              <div className={styles['box-item-title']}>
                <img loading="lazy" src="/images/play_phone.png" alt="手机" />
                <span>安卓手机客户端</span>
              </div>
              <p className={styles['box-item-desc']}>倍速播、高清画质、流畅播放、离线下载</p>
              <div className={styles['box-item-right-code']}>
                <div className={styles['item-right-code-left']}>
                  <a
                    rel="nofollow"
                    className={styles['box-item-phone-download']}
                    href={DOWNLOAD_URL.phone}
                    download
                    onClick={() => downloadReport('home_phone_download')}
                  >
                    <img loading="lazy" src="/images/download_page.png" alt="电视下载" />
                    <span>下载安装包</span>
                  </a>
                  <p className={styles['box-item-phone-text']}>
                    <span>复制链接到手机浏览器下载</span>
                    <span className="down-btn" data-clipboard-text="https://www.histar.tv/download/">
                      复制
                    </span>
                  </p>
                </div>
                <Image
                  className={styles['item-right-code-right']}
                  src="/images/app_code.png"
                  alt="二维码"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 移动端适配h5 */}
      {
        <div className={cls(styles.downloadH5, 'hideWhenPc')}>
          <div className={styles['download-h5-tab']}>
            <div
              className={cls(styles['download-h5-tab-item'], {
                [styles['download-h5-tab-active']]: type === 'phone'
              })}
              onClick={() => [setType('phone'), sessionStorage.setItem('downloadType', 'phone')]}
            >
              <img loading="lazy" src={`/images/phone-download${type === 'phone' ? '-active' : ''}.png`} alt="手机" />
              <span>安卓手机端</span>
            </div>
            <div
              className={cls(styles['download-h5-tab-item'], {
                [styles['download-h5-tab-active']]: type === 'tv'
              })}
              onClick={() => [setType('tv'), sessionStorage.setItem('downloadType', 'tv')]}
            >
              <img loading="lazy" src={`/images/tv-download${type === 'tv' ? '-active' : ''}.png`} alt="电视" />
              <span>电视端</span>
            </div>
          </div>
          <p className={styles['download-h5-slogan']}>更多内容 更多享受</p>
          <p className={styles['download-h5-desc']}>全球直播电视台、电影、电视剧、综艺、体育赛事...全都有</p>
          {type === 'phone' ? (
            <>
              <img loading="lazy" src="/images/guide-phone.webp" alt="手机" className={styles['download-h5-img']} />
              <p className={styles['download-h5-tv']}>安卓手机客户端</p>
              <p className={styles['download-h5-advantage']}>倍速播、高清画质、流畅播放、离线下载</p>
              <a
                rel="nofollow"
                download
                href={DOWNLOAD_URL.phone}
                className={styles['download-h5-btn-down']}
                onClick={() => downloadReport('guide_usb_phone_download')}
              >
                立即下载
              </a>
              <p style={{ paddingTop: 100 }}></p>
            </>
          ) : (
            <>
              <img loading="lazy" src="/images/guide-tv.webp" alt="电视" className={styles['download-h5-img']} />
              <p className={styles['download-h5-tv']}>电视/机顶盒客户端</p>
              <p className={styles['download-h5-advantage']}>倍速播、高清画质、流畅播放</p>
              <a
                rel="nofollow"
                download
                href={DOWNLOAD_URL.tv}
                className={styles['download-h5-btn-down']}
                onClick={() => downloadReport('guide_usb_tv_download')}
              >
                立即下载
              </a>
              <p className={styles['download-h5-guide']}>
                <Link href="/download/usb">有U盘安装指南{'>>'}</Link>
                <Link href="/download/withoutusb">无U盘安装指南{'>>'}</Link>
              </p>
            </>
          )}
        </div>
      }
    </>
  )
}

export default Index

export async function getServerSideProps() {
  return {
    props: {
      layoutProps: {
        noSomeMetaInfo: false,
        url: '/download',
        title: '星视界应用下载 - 支持电视设备及安卓手机',
        desc: '星视界提供最全的中文电视直播及海量影视资源，现已适配手机及电视设备，马上下载开启完整影视&直播体验吧。'
      }
    }
  }
}
